﻿<style>
  * {
    font-family: "ArialMT", "Arial";
    font-weight: 400;
  }

  .file_info.el-table td, .file_info.el-table th {
    padding: 2px 0 !important;
  }

  .file_info .el-button + .el-button {
    margin-left: 0;
  }


</style>
<template>
  <div id="app" v-loading="loading" ref="main_page" element-loading-text="正在加载..." style="height: 100%;">
    <el-table class="file_info" :data="[file]" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="name" show-overflow-tooltip label="文件名称"/>
      <el-table-column width="200" prop="createTime" label="上传时间"/>
<!--      <el-table-column prop="createUser" show-overflow-tooltip label="上传人" width="100"/>-->

      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="item">
          <el-button @click="downloadFile" size="small">下载</el-button>

        </template>
      </el-table-column>

    </el-table>
    <div v-if="!supportPreview">
      该文件类型暂不支持预览
    </div>
    <div v-else-if="type=='pdf'">
<!--      <pdf :src="pdfInfo.url"-->
<!--           v-for="i in pdfInfo.pageCount"-->
<!--           :key="i"-->
<!--           :page="i"-->
<!--           style="width: 100%;"/>-->
        <iframe :src="$ctx+'/static/pdfjs-2.5.207-es5-dist/web/viewer.html?file='+$ctx+'/file/download/' + file.id" width="100%" :height="maxHeight-90"></iframe>
    </div>
    <div v-else-if="type=='openoffice'">
<!--      <pdf :src="pdfInfo.url"-->
<!--           v-for="i in pdfInfo.pageCount"-->
<!--           :key="i"-->
<!--           :page="i"-->
<!--           style="width: 100%;"/>-->
        <iframe :src="$ctx+'/static/pdfjs-2.5.207-es5-dist/web/viewer.html?file='+$ctx+'/file/preview/convert2pdf/' + file.id" width="100%" :height="maxHeight-90"></iframe>
    </div>
    <div v-else-if="type=='excel'">
      <excel-view
        v-if="excelData"
        :data="excelData"
        :max-height="maxHeight-90"
      ></excel-view>
    </div>
    <div v-else-if="type=='image'">
      <el-image  :src="downloadUrl"></el-image>
    </div>
  </div>
</template>
<script>
    // import pdf from 'vue-pdf'

    export default {
        name: "FilePreview",
        // components: {
        //     pdf
        // },
        data() {
            return {
                loading: false,
                pdfInfo: {url: '', pageCount: 1},
                type: '',
                file: {},
                downloadUrl:'',
                supportPreview: true,
                excelData: null,
                maxHeight: 500
            };
        },
        mounted() {
            this.maxHeight = document.documentElement.clientHeight;
            this.downloadUrl = Vue.prototype.$ctx + '/file/download/' + file.id;

            this.file = file;
            if (file.name.length <= 0 || file.name.lastIndexOf('.') < 0) {
                this.supportPreview = false;
                return;
            }
            var fileType = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length);
            this.type = fileType;
            if (fileType == 'xls' || fileType == 'xlsx') {
                this.type = 'excel';
            } else if (fileType == 'doc' || fileType == 'docx'||fileType=="txt"||fileType=="ppt"||fileType=="pptx"||fileType=="log") {
                this.type = 'openoffice';
            } else if(fileType == 'jpg'||fileType=='jpeg'||fileType=='bmp'||fileType=='png'||fileType=='gif'){
                this.type = 'image';
            }

            if (this.type == 'pdf') {
                // this.loadPdfInfo(this.downloadUrl);
            } else if (this.type == 'excel') {
                this.loadExcelData();
            } else if(this.type =='image'){

            } else if(this.type =='openoffice'){

            } else {
                this.supportPreview = false;
            }
        },

        watch: {},
        methods: {
            async loadPdfInfo(url) {
                this.loading = true;
                this.pdfInfo.url = url;
                this.pdfInfo.pageCount = await pdf.createLoadingTask(url).promise.then(pdf => {
                    return pdf.numPages;
                })
                this.loading = false;
            },
            loadExcelData() {
                this.loading = true;
                this.$get(
                    "/file/preview/excel/" + this.file.id,
                    {},
                    (response) => {
                        this.excelData = response.data;
                    },
                    () => {
                        this.loading = false;
                    }
                );
            },

            downloadFile() {
                window.open(this.downloadUrl);
            },
            logout: function () {
                location.href = this.$ctx + "/logout";
            },
        },
    };
</script>
